<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <form action="/aaa" @submit.prevent="handle">
            <span>用户名：</span><input type="text" v-model="username"><br>
            <span>密码：</span><input type="password" v-model="password"><br>
            <span>性别：</span>
            <input type="radio" id="woman" value="woman" v-model="sex">女
            <input type="radio" id=man" value="man" v-model="sex">男
            <br>
            <span>爱好：</span>
            <input type="checkbox" id=basketball" value="basketball" v-model="likes">篮球
            <input type="checkbox" id=football" value="football" v-model="likes">足球
            <input type="checkbox" id=pingpang" value="pingpang" v-model="likes">乒乓球
            <br>
            <span>城市：</span>
            <select name="" id="" v-model="cityId">
                <option value="">请选择</option>
                <option :value="city.id" v-for='(city,index) in cities' :key='index'>{{city.name}}</option>
            </select>
            <br>
            <span>兴趣：</span>
            <textarea name="" id="" cols="30" rows="10" v-model="desc">

            </textarea>
            <br>
            <input type="submit" value="注册">
        </form>
    </div>
</body>
<script src="../../public/vue.dev.js"></script>
<script>
    new Vue({
        el:'#app',
        data:{
            username:'',
            password:'',
            sex:'man',
            likes:['pingpang'],
            cities:[
                {id:1,name:"BJ"},
                {id:2,name:"SH"},
                {id:3,name:"GZ"},
            ],
            cityId:'2',
            desc:'123',
        },
        methods:{
            handle(){
                console.log(this.username,this.password);
            }
        },
    });

    /**
     * tips:
     * 使用v-model（双向数据绑定）实现表单数据自动收集
     * 在每一个表单元素上绑定v-model 会自动收集用户输入的值 使用this.attr即可收集对应的输入信息
     * **/
</script>
</html>
